<template>
  <div>
    <div class="box">
    <div class="sale" ref="sss"></div>
    <div class="area" ref="aaa"></div>
  </div>
  <div class="box-bottom">
      <div
        @click="updataTime('week')"
        class="item"
        :class="{ active: num === 'week' }"
      >
        周
      </div>
      <div
        @click="updataTime('month')"
        class="item"
        :class="{ active: num === 'month' }"
      >
        月
      </div>
      <div
        @click="updataTime('year')"
        class="item"
        :class="{ active: num === 'year' }"
      >
        年
      </div>
    </div>
  </div>
</template>

<script>
// getSaleAreas
import * as echarts from 'echarts'
import { getSaleTrend, getSaleAreas } from '@/api/home'
import dayjs from 'dayjs'
export default {
  name: 'MySaleInfo',
  data () {
    return {
      // 趋势图的数据
      trend: [],
      // 分布图的数据
      area: [],
      num: 'week',
      date: '',
      time: '',
      yearOne: '',
      monthOne: '',
      weekOne: '',
      // 请求参数
      opTrend: {
        id: '1',
        start: '',
        end: ''
      },
      opArea: {
        start: this.weekOne,
        end: this.date
      }
    }
  },
  async created () {
    // 获取当天时间
    this.date = dayjs().format('YYYY-MM-DD')
    this.opTrend.end = this.date
    this.opArea.end = this.date
    console.log(this.date)
    // 当前时间点--时分秒
    this.time = dayjs().endOf().format('YYYY-MM-DD HH:mm:ss')
    console.log(this.time)
    // 今年的第一天
    this.yearOne = dayjs().format('YYYY') + '-01-01'
    console.log(this.yearOne)
    // 本月的第一天
    this.monthOne = dayjs().startOf('month').format('YYYY-MM-DD')
    console.log(this.monthOne)
    // 本周的第一天
    this.weekOne = dayjs()
      .subtract(dayjs().day() ? dayjs().day() - 1 : 6, 'day')
      .format('YYYY-MM-DD')
    this.opTrend.start = this.weekOne
    this.opArea.start = this.weekOne
    console.log(this.weekOne)
    // 趋势图
    const res = await getSaleTrend(this.opTrend.id, this.opTrend.start, this.opTrend.end)
    // console.log(res)
    this.trend = res
    await this.myEcharts()
    // 分布图
    const a = await getSaleAreas(this.opArea.start, this.opArea.end)
    // console.log(a)
    this.area = a
    await this.myEchartsArea()
  },
  methods: {
    myEcharts () {
      const myChart = echarts.init(this.$refs.sss)
      const option = {
        title: [
          {
            text: '销售额分布',
            left: '40%',
            top: '6%',
            textStyle: {
              fontSize: '14px'
            }
          },
          {
            text: '单位：元',
            left: '4%',
            top: '8%',
            textStyle: {
              fontSize: '12px',
              color: '#ccc'
            }
          }
        ],
        // barWidth: '25%',
        grid: {
          left: '15%'
        },
        xAxis: {
          type: 'category',
          data: this.trend.xAxis,
          areaStyle: {
            color: ['#fecece', '#fffbfb']
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.trend.series,
            type: 'line',
            smooth: true,
            // symbol:'circle',
            lineStyle: {
              // color: '#ff5757',
              // width: 4
            },
            itemStyle: {
              color: '#ff5750'
            },
            areaStyle: {}
          }
        ]
      }
      myChart.setOption(option)
    },
    myEchartsArea () {
      const myChartArea = echarts.init(this.$refs.aaa)
      const option = {
        title: [
          {
            text: '销售额分布',
            left: '40%',
            top: '6%',
            textStyle: {
              fontSize: '14px'
            }
          },
          {
            text: '单位：元',
            left: '4%',
            top: '8%',
            textStyle: {
              fontSize: '12px',
              color: '#ccc'
            }
          }
        ],
        tooltip: {
          show: true
        },
        grid: {
          left: '15%'
        },
        xAxis: {
          type: 'category',
          data: this.area.xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.area.series,
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              borderRadius: [6, 6, 0, 0] // 重点
            }
          }
        ]
      }
      myChartArea.setOption(option)
    },
    async updataTime (style) {
      this.num = style
      if (style === 'week') {
        // 第一个图
        this.opTrend.start = this.weekOne
        this.opTrend.end = this.date
        const weeko = await getSaleTrend(this.opTrend.id, this.opTrend.start, this.opTrend.end)
        this.trend.xAxis = weeko.xAxis
        this.trend.series = weeko.series
        await this.myEcharts()
        // 第二个图
        this.opArea.start = this.weekOne
        this.opArea.end = this.date
        const weekl = await getSaleAreas(this.opArea.start, this.opArea.end)
        this.area.xAxis = weekl.xAxis
        this.area.series = weekl.series
        await this.myEchartsArea()
      }
      if (style === 'month') {
        // 第一个图
        this.opTrend.start = this.monthOne
        this.opTrend.end = this.date
        const montho = await getSaleTrend(this.opTrend.id, this.opTrend.start, this.opTrend.end)
        this.trend.xAxis = montho.xAxis
        this.trend.series = montho.series
        await this.myEcharts()
        // console.log(montho)
        // 第二个图
        this.opArea.start = this.monthOne
        this.opArea.end = this.date
        const monthl = await getSaleAreas(this.opArea.start, this.opArea.end)
        this.area.xAxis = monthl.xAxis
        this.area.series = monthl.series
        await this.myEchartsArea()
        // console.log(monthl)
      }
      if (style === 'year') {
        // 第一个图
        this.opTrend.id = '2'
        this.opTrend.start = this.yearOne
        this.opTrend.end = this.date
        const yearo = await getSaleTrend(this.opTrend.id, this.opTrend.start, this.opTrend.end)
        this.trend.xAxis = yearo.xAxis
        this.trend.series = yearo.series
        await this.myEcharts()
        // 第二个图
        this.opArea.start = this.yearOne
        this.opArea.end = this.date
        const yearl = await getSaleAreas(this.opArea.start, this.opArea.end)
        this.area.xAxis = yearl.xAxis
        this.area.series = yearl.series
        await this.myEchartsArea()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  width: 100%;
  display: flex;
  .sale {
    float: left;
    width: 50%;
    height: 250px;
  }
  .area {
    float: right;
    width: 50%;
    height: 250px;
  }
}
.box-bottom {
    position: absolute;
    top: 30px;
    right: 0;
    display: flex;
    align-items: center;
    width: 129px;
    height: 34px;
    background: rgba(233, 243, 255, 0.37);
    border-radius: 10px;
    .item {
      width: 37px;
      height: 25px;
      line-height: 25px;
      font-size: 14px;
      color: #9ca3b4;
      cursor: pointer;
      text-align: center;
    }
    .active {
      background-color: #fff;
      box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
      border-radius: 7px;
      font-weight: 600;
      color: #333 !important;
    }
  }
</style>
